import React, { Component } from 'react';
import { Player, ControlBar  } from 'video-react';
import "../../../node_modules/video-react/dist/video-react.css";
import './index.less';
/**
 * 视频播放组件
 */
class Video extends Component {
  static defaultProps = {
    prefixCls: 'antui-video'
  };

  constructor(props, context) {
    super(props, context);

    this.state = {
      source: "",
      isStart: 0,
    };

    this.play = this.play.bind(this);
    this.pause = this.pause.bind(this);
    this.load = this.load.bind(this);
    this.changeCurrentTime = this.changeCurrentTime.bind(this);
    this.seek = this.seek.bind(this);
    this.changePlaybackRateRate = this.changePlaybackRateRate.bind(this);
    this.changeVolume = this.changeVolume.bind(this);
    this.setMuted = this.setMuted.bind(this);
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
		 this.player.load();
		this.setState({
			source: nextProps.src,
		}, () => {
			this.changeSource(nextProps.src)
		})
  }
  
  componentDidMount() {
    // subscribe state change
    this.player.subscribeToStateChange(this.handleStateChange.bind(this));
  }

  setMuted(muted) {
    return () => {
      this.player.muted = muted;
    };
  }

  handleStateChange(state) {
    // copy player state to this component's state
    this.setState({
      player: state
    });
  }

  play() {
    this.setState({ isStart:1 })
    this.player.play();
  }

  pause() {
    this.player.pause();
  }

  load() {
    this.player.load();
  }

  changeCurrentTime(seconds) {
    return () => {
      const { player } = this.player.getState();
      this.player.seek(player.currentTime + seconds);
    };
  }

  seek(seconds) {
    return () => {
      this.player.seek(seconds);
    };
  }

  changePlaybackRateRate(steps) {
    return () => {
      const { player } = this.player.getState();
      this.player.playbackRate = player.playbackRate + steps;
    };
  }

  changeVolume(steps) {
    return () => {
      const { player } = this.player.getState();
      this.player.volume = player.volume + steps;
    };
  }

  changeSource(name) {
    return () => {
      this.setState({
        source: name
      });
      this.player.load();
    };
  }

  render() {
    const { src, imageUrl, visible } = this.props
    const { isStart } = this.state
    return (
      <div className="myplayer-container" style={{display: visible}}>
        {
          isStart === 0 ?
          imageUrl && imageUrl!=="" ?
          <div className="myplayer-mask" >
            <img src={imageUrl} alt="" />
            <button className="myplayer-button" type="button" onClick={this.play.bind(this)}><span>Play Video</span></button>
          </div>
          : null
          : null
          

        }
        <Player
          ref={player => {
            this.player = player;
          }}
          className="myplayer"
        >
          <source src={src} />
          <ControlBar autoHide={false} />
        </Player>
      </div>
    );
  }
}

export default Video;